都会|本文_在Flutter中解析复杂的JSON

作者：洁西卡915_922 | 来源：互联网 | 2023-08-08 15:51

篇首语：本文由编程笔记#小编为大家整理，主要介绍了在Flutter中解析复杂的JSON相关的知识，希望对你有一定的参考价值。在Flutter/Dart中使用JSON后

篇首语：本文由编程笔记#小编为大家整理，主要介绍了在Flutter中解析复杂的JSON相关的知识，希望对你有一定的参考价值。

在Flutter / Dart中使用JSON后&＃xff0c;我错过了android的gson 世界。当我开始在Flutter中使用API时&＃xff0c;JSON解析确实使我非常费力。而且我敢肯定&＃xff0c;这会让很多初学者感到困惑。

我们将使用dart:convert此博客的内置库。这是最基本的解析方法&＃xff0c;仅在从Flutter开始或正在构建小型项目时才建议使用。尽管如此&＃xff0c;了解Flutter中JSON解析的基础还是很重要的。如果您擅长于此&＃xff0c;或者需要处理较大的项目&＃xff0c;请考虑使用json_serializable等代码生成器库。如果可能&＃xff0c;我将在以后的文章中找到它们。

Fork this sample project. 它包含您可以尝试的此博客的所有代码。

JSON结构&＃xff03;1&＃xff1a;简单 map

让我们从student.json中的简单JSON结构开始

"id":"487349", "name":"Pooja Bhaumik", "score" : 1000

规则1&＃xff1a; 确定结构。Json字符串将具有一个Map&＃xff08;键-值对&＃xff09;或一个Map列表。

规则2&＃xff1a;从大括号开始&＃xff1f;这是一map.
以方括号开头&＃xff1f;That’s a List of maps.**

student.json显然是map. ( E.g like, id is a key, and 487349 is the value for id)

让我们为此json结构制作一个PODO&＃xff08;普通的旧式Dart对象&＃xff1f;&＃xff09;文件。您可以在示例项目的student_model.dart中找到此代码。

class Student String studentId; String studentName; int studentScores; Student( this.studentId, this.studentName, this.studentScores );

完美的&＃xff01;

*是吗因为json映射与此PODO文件之间没有映射。甚至实体名称都不匹配。
*我知道我知道。我们还没有完成。我们必须完成将这些类成员映射到json对象的工作。为此&＃xff0c;我们需要创建一个factory方法。根据Dart文档&＃xff0c;我们factory在实现构造器时使用了关键字&＃xff0c;该构造器并不总是创建其类的新实例&＃xff0c;而这正是我们现在所需要的。

factory Student.fromJson(Map parsedJson) return Student( studentId: parsedJson[&＃39;id&＃39;], studentName : parsedJson[&＃39;name&＃39;], studentScores : parsedJson [&＃39;score&＃39;] );

在这里&＃xff0c;我们正在创建一个工厂方法Student.fromJson&＃xff0c;该方法的目标是简单地反序列化您的json。

我有点菜鸟&＃xff0c;您能告诉我有关反序列化的信息吗&＃xff1f;

当然。首先让我们介绍一下序列化和反序列化。序列化只是意味着将数据&＃xff08;可能在对象中&＃xff09;写入字符串&＃xff0c;而反序列化则相反。它获取原始数据并重建对象模型。在本文中&＃xff0c;我们主要将处理反序列化部分。在第一部分中&＃xff0c;我们将从中反序列化json字符串student.json

So our factory method could be called as our converter method.

还必须注意fromJson方法中的参数。这是一个Map意思是它映射一个String 键和一个dynamic 值。这正是我们需要确定结构的原因。 If this json structure were a List of maps, 则此参数将有所不同

***但是为什么要动态&＃xff1f;****
*让我们先看看另一个json结构来回答您的问题

name is a Map ,majors is a Map of String and List and subjects is a Map of String and List

由于密钥始终是 string 并且值可以是任何类型&＃xff0c;因此我们将其保持dynamic安全。

Check the full code for student_model.dart here.

访问对象

让我们来编写student_services.dart其中的代码&＃xff0c;该代码可以调用Student.fromJson并从Student对象中检索值

Snippet #1 : imports

import &＃39;dart:async&＃39; show Future; import &＃39;package:flutter/services.dart&＃39; show rootBundle; import &＃39;dart:convert&＃39;; import &＃39;package:flutter_json/student_model.dart&＃39;;

最后的导入将是模型文件的名称

Snippet #2 : 加载Json Asset&＃xff08;可选&＃xff09;**

Future _loadAStudentAsset() async return await rootBundle.loadString(&＃39;assets/student.json&＃39;);

在这个特定的项目中&＃xff0c;我们的json文件位于assets文件夹中&＃xff0c;因此我们必须以这种方式加载json。但是&＃xff0c;如果您将json文件存储在云中&＃xff0c;则可以进行网络调用。网络调用不在本文讨论范围之内。

Snippet #3 : 加载响应

Future loadStudent() async String jsonString &＃61; await _loadAStudentAsset(); final jsonResponse &＃61; json.decode(jsonString); Student student &＃61; new Student.fromJson(jsonResponse); print(student.studentScores);

在此loadStudent()方法中&＃xff0c;
Line 1 : 加载原始json字符串。from the assets.
Line 2 : 解码我们得到的原始json字符串
Line 3 : 现在&＃xff0c;我们通过调用Student.fromJson方法来反序列化解码的json响应&＃xff0c;以便我们现在可以使用Studentobject访问实体
Line 4 : 就像我们在这里所做的那样&＃xff0c;where we printed studentScores from Student class.

检查Flutter控制台以查看所有打印值。(In Android Studio, its under Run tab)*

瞧&＃xff01;您只是进行了第一个JSON解析&＃xff08;或没有&＃xff09;。
注意&＃xff1a;请记住这里的3个代码段&＃xff0c;我们将使用它来进行下一组json解析&＃xff08;仅更改文件名和方法名称&＃xff09;&＃xff0c;在此我将不再重复代码。但是您仍然可以在示例项目中找到所有内容。

JSON结构&＃xff03;2&＃xff1a;具有数组的简单结构

现在&＃xff0c;我们征服了一种与上述结构相似的json结构&＃xff0c;但它可能不仅具有单个值&＃xff0c;而且还可能have an array of values.

"city": "Mumbai", "streets": [ "address1", "address2" ]

So in this address.json, we have city entity that has a simple String value, but streets is an array of String.
据我所知&＃xff0c;Dart没有数组数据类型&＃xff0c;但是有 a List 所以这里streets是一个List。

现在我们必须检查Rule&＃xff03;1和Rule&＃xff03;2。这绝对是一 map 因为它以花括号开头。. streets is still a List though, 但我们稍后会担心。

所以address_model.dart最初看起来像这样

class Address final String city; final List streets; Address( this.city, this.streets );

现在&＃xff0c;由于这是一amap, 因此我们的Address.fromJson方法将仍然具有一个Map参数。

factory Address.fromJson(Map parsedJson) return new Address( city: parsedJson[&＃39;city&＃39;], streets: parsedJson[&＃39;streets&＃39;], );

现在&＃xff0c;address_services.dart通过添加我们上面提到的3个片段来构建。必须记住要放置正确的文件名和方法名。示例项目已经*address_services.dart*为您构建。

现在&＃xff0c;当您运行此命令时&＃xff0c;您将得到一个不错的小错误。&＃xff1a;/

type &＃39;List&＃39; is not a subtype of type &＃39;List&＃39;

我告诉你&＃xff0c;这些错误几乎都发生在我使用Dart开发的每个步骤中。而且您也将拥有它们。因此&＃xff0c;让我解释一下这意味着什么。我们正在请求一个&＃xff0c;List但是却收到一个&＃xff0c;List因为我们的应用程序尚无法识别类型。

因此&＃xff0c;我们必须将其明确转换为 List

var streetsFromJson &＃61; parsedJson[&＃39;streets&＃39;]; List streetsList &＃61; new List.from(streetsFromJson);

在这里&＃xff0c;首先我们将变量映射streetsFromJson到streets实体。streetsFromJson还是一个List。现在&＃xff0c;我们明确地创建一个新的List streetsList包含所有元素的streetsFromJson。

在此处检查更新的方法。现在注意return语句。
现在&＃xff0c;您可以运行此程序&＃xff0c;*address_services.dart*它将完美运行。

Json结构&＃xff03;3&＃xff1a;简单嵌套结构

现在&＃xff0c;如果我们有一个来自shape.json的嵌套结构&＃xff0c;该怎么办

"shape_name":"rectangle", "property": "width":5.0, "breadth":10.0

在这里&＃xff0c;property包含一个对象而不是基本的原始数据类型。
那么PODO会是什么样子&＃xff1f;

好吧&＃xff0c;让我们分解一下。In our shape_model.dart , let’s make a class for Property first.

class Property double width; double breadth; Property( this.width, this.breadth );

现在&＃xff0c;我们为构建类Shape。我将两个类都放在同一个Dart文件中。

class Shape String shapeName; Property property; Shape( this.shapeName, this.property );

请注意&＃xff0c;第二个数据成员property is basically an object of是我们上一类的对象 Property.

规则3&＃xff1a;对于嵌套结构&＃xff0c;请首先创建类和构造函数&＃xff0c;然后从底层添加工厂方法

所谓底层&＃xff0c;是指首先征服*Property*阶级&＃xff0c;然后再上一层*Shape**。

By bottom level, we mean, first we conquer *Property* class, and then we go one level above to the *Shape* class. 这只是我的建议&＃xff0c;而不是Flutter规则。

factory Property.fromJson(Map json) return Property( width: json[&＃39;width&＃39;], breadth: json[&＃39;breadth&＃39;] );

这是一 simple map.*

但是对于我们 factory method at Shape class, 我们不能仅仅这样做

factory Shape.fromJson(Map parsedJson) return Shape( shapeName: parsedJson[&＃39;shape_name&＃39;], property : parsedJson[&＃39;property&＃39;] );

property : parsedJson[&＃39;property&＃39;] 首先&＃xff0c;这将引发类型不匹配错误-

type &＃39;_InternalLinkedHashMap&＃39; is not a subtype of type &＃39;Property&＃39;

And second, *hey we just *制作了一个不错的 little class for Property, 我看不到它在任何地方都有用。

Right.我们必须在此处映射我们的Property类。

factory Shape.fromJson(Map parsedJson) return Shape( shapeName: parsedJson[&＃39;shape_name&＃39;], property: Property.fromJson(parsedJson[&＃39;property&＃39;]) );

因此&＃xff0c;基本上&＃xff0c;我们Property.fromJson从Property类中调用该方法&＃xff0c;作为返回&＃xff0c;we map it to the property entity. Simple! Check out the code here.

Run this with your shape_services.dart and you are good to go.

JSON结构&＃xff03;4&＃xff1a;具有列表的嵌套结构

让我们检查一下product.json

"id":1, "name":"ProductName", "images":[ "id":11, "imageName":"xCh-rhy" , "id":31, "imageName":"fjs-eun" ]

好的&＃xff0c;现在我们越来越深入。我在内部某处看到对象列表。哇。 Woah.*

是的&＃xff0c;因此此结构具有一个对象列表&＃xff0c;但其本身仍是 a map. (请参阅规则1和规则2&＃xff09;。现在参考规则3&＃xff0c;让我们构造我们的product_model.dart。

所以我们创建了两个新类Product和Image。
Note: *Product* will 将具有一个数据成员&＃xff0c;该成员是 List of *Image*

class Product final int id; final String name; final List images; Product(this.id, this.name, this.images); class Image final int imageId; final String imageName; Image(this.imageId, this.imageName);

The factory method for Image will be非常简单和基本。

factory Image.fromJson(Map parsedJson) return Image( imageId:parsedJson[&＃39;id&＃39;], imageName:parsedJson[&＃39;imageName&＃39;] );

Now for the factory method for Product

factory Product.fromJson(Map parsedJson) return Product( id: parsedJson[&＃39;id&＃39;], name: parsedJson[&＃39;name&＃39;], images: parsedJson[&＃39;images&＃39;] );

这显然会引发运行时错误

type &＃39;List&＃39; is not a subtype of type &＃39;List&＃39;

如果我们这样做&＃xff0c;

images: Image.fromJson(parsedJson[&＃39;images&＃39;])

这也绝对是错误的&＃xff0c;它会立即引发错误&＃xff0c;因为您无法将Image对象分配给List

因此&＃xff0c;我们必须创建一个List&＃xff0c;然后将其分配给images

var list &＃61; parsedJson[&＃39;images&＃39;] as List; print(list.runtimeType); //returns ListList imagesList &＃61; list.map((i) &＃61;> Image.fromJson(i)).toList();

list这是一个List 。现在&＃xff0c;我们遍历列表&＃xff0c;每个对象映射list到Image调用Image.fromJson&＃xff0c;&＃xff08;and map each object in list to Image by calling Image.fromJson &＃xff09;and then we把每个map object into 一个新的列表with toList() and 存储in List imagesList. Find the full code here.

JSON结构&＃xff03;5: List of maps

现在让我们转到photo.json

[ "albumId": 1, "id": 1, "title": "accusamus beatae ad facilis cum similique qui sunt", "url": "http://placehold.it/600/92c952", "thumbnailUrl": "http://placehold.it/150/92c952" , "albumId": 1, "id": 2, "title": "reprehenderit est deserunt velit ipsam", "url": "http://placehold.it/600/771796", "thumbnailUrl": "http://placehold.it/150/771796" , "albumId": 1, "id": 3, "title": "officia porro iure quia iusto qui ipsa ut modi", "url": "http://placehold.it/600/24f355", "thumbnailUrl": "http://placehold.it/150/24f355" ]

哦&＃xff0c;哦。规则1和规则2告诉我这不可能是 a map 因为json字符串以方括号开头这是对象列表吗&＃xff1f;是的 The object being here is Photo (或任何您想调用的对象).

class Photo final String id; final String title; final String url; Photo( this.id, this.url, this.title ) ; factory Photo.fromJson(Map json) return new Photo( id: json[&＃39;id&＃39;].toString(), title: json[&＃39;title&＃39;], url: json[&＃39;json&＃39;], );

但是它的列表*Photo*&＃xff0c;这是否意味着您必须构建一个包含的类*List*&＃xff1f;

是的&＃xff0c;我建议。

class PhotosList final List photos; PhotosList( this.photos, );

另请注意&＃xff0c;此json字符串是List of maps. 。因此&＃xff0c;在我们的工厂方法中&＃xff0c;我们没有Map参数&＃xff0c;因为它是一个列表。这就是为什么首先确定结构很重要的原因。因此&＃xff0c;我们的新参数将为List。

factory PhotosList.fromJson(List parsedJson) List photos &＃61; new List(); return new PhotosList( photos: photos, );

这会引发错误

Invalid value: Valid value range is empty: 0

嘿&＃xff0c;因为我们永远无法使用该Photo.fromJson方法。
如果在列表初始化后添加此行代码怎么办&＃xff1f;

photos &＃61; parsedJson.map((i)&＃61;>Photo.fromJson(i)).toList();

与之前的概念相同&＃xff0c;我们不必将其映射到json字符串中的任何键&＃xff0c;因为它是列表&＃xff0c;而不是映射。Code here.

JSON结构&＃xff03;6&＃xff1a;复杂的嵌套结构

Here is page.json.

我将要求您解决此问题。它已经包含在示例项目中。您只需要为此构建模型和服务文件。但是在给您提示之前&＃xff0c;我不会总结&＃xff08;如果需要&＃xff0c;则需要任何提示&＃xff09;。

照常应用规则1和规则2。首先确定结构。这是一 a map. 因此&＃xff0c;从1-5开始的所有json结构都会有所帮助。

规则3要求您首先创建类和构造函数&＃xff0c;然后从最底层添加工厂方法。Just another tip. Also add the classes from the deep/bottom level. For e.g, for this json structure, make the class for Image first, then Data and Author and then the main class Page. 并按相同顺序添加工厂方法。

对于类Image&＃xff0c;Data请参考Json结构&＃xff03;4。
有关类&＃xff0c;Author请参阅Json结构&＃xff03;3

初学者提示&＃xff1a;在尝试任何新资产时&＃xff0c;请记住在pubspec.yaml文件中进行声明。

这篇Fluttery文章就是这样。本文可能不是那里最好的JSON解析文章&＃xff0c;&＃xff08;因为我还在学习很多东西&＃xff09;&＃xff0c;但我希望它能帮助您入门。

如果您学到了一两件事&＃xff0c;请拍拍手&＃x1f44f;尽可能多地表示支持&＃xff01;这激励着我写更多的东西。

此&＃xff0c;从1-5开始的所有json结构都会有所帮助。

对于类Image&＃xff0c;Data请参考Json结构&＃xff03;4。
有关类&＃xff0c;Author请参阅Json结构&＃xff03;3

参考&＃xff1a;https://medium.com/flutter-community/parsing-complex-json-in-flutter-747c46655f51https://medium.com/flutter-community/parsing-complex-json-in-flutter-747c46655f51

复杂JSON解析&＃xff1f;

如何解析对象中的数组&＃xff1f;

"url": "xxx", "tabs": [ "labelName": "推荐", "groupChannelCode": "tourphoto_global1" , "labelName": "拍照技巧", "groupChannelCode": "tab-photo" ]

解析&＃xff1a;

class TravelTabModel String url; List tabs; TravelTabModel(this.url, this.tabs); TravelTabModel.fromJson(Map json) url &＃61; json[&＃39;url&＃39;]; (json[&＃39;tabs&＃39;] as List).map((i) &＃61;> TravelTab.fromJson(i)); class TravelTab String labelName; String groupChannelCode; TravelTab(this.labelName, this.groupChannelCode); TravelTab.fromJson(Map json) labelName &＃61; json[&＃39;labelName&＃39;]; groupChannelCode &＃61; json[&＃39;groupChannelCode&＃39;];

如果要加些异常处理&＃xff1a;

TravelTabModel.fromJson(Map json) url &＃61; json[&＃39;url&＃39;]; if (json[&＃39;tabs&＃39;] !&＃61; null) tabs &＃61; new List(); json[&＃39;tabs&＃39;].forEach((v) tabs.add(new TravelTab.fromJson(v)); );

改成final&＃xff1a;

class TravelTabModel final String url; final List tabs; TravelTabModel(this.url, this.tabs); factory TravelTabModel.fromJson(Map json) String url &＃61; json[&＃39;url&＃39;]; List tabs &＃61; (json[&＃39;tabs&＃39;] as List).map((i) &＃61;> TravelTab.fromJson(i)).toList(); return TravelTabModel(url: url, tabs: tabs);